<template>
<div style="width:100%; margin:0 auto;">
  <el-table
    :data=" this.$store.state.newsList"
    border
    style="width: 100%;">
    <el-table-column 
      fixed
      prop="number"
      label="#"
      width="160">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="200">
    </el-table-column>
    <el-table-column
      prop="position"
      label="职位"
      width="200">
    </el-table-column>
    <el-table-column
      prop="root"
      label="权限"
      width="200">
    </el-table-column>
    <el-table-column
      prop="gender"
      label="性别"
      width="200">
    </el-table-column>
    <el-table-column
      prop="work"
      label="工作地点"
      width="200">
    </el-table-column>
    <el-table-column
      prop="call"
      label="联系方式"
      width="210">
    </el-table-column>
      <el-table-column
      prop="user"
      label="登陆账户名"
      width="250">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="180">
      <template slot-scope="scope">
        <el-button @click="xiugai(scope.$index, scope.row)" type="text" size="small">修改</el-button>
        <el-button   @click="set(scope.$index, scope.row)" type="text" size="small">设置密码</el-button>
        <el-button  @click.native.prevent="deleteRow(scope.$index)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
  title="编辑"
  :visible.sync="dialogVisible"
  width="25%"
  :before-close="handleClose">
<a style="font-weight:bold">姓名：</a>
<el-input  v-model="updateData.name"></el-input>
<a style="font-weight:bold">职位：</a>
<el-input  v-model="updateData.position"></el-input>
<a style="font-weight:bold">权限：</a>
<el-input  v-model="updateData.root"></el-input>
<a style="font-weight:bold">性别：</a>
<el-input  v-model="updateData.gender"></el-input>
<a style="font-weight:bold">工作地点：</a>
<el-input  v-model="updateData.work"></el-input>
<a style="font-weight:bold">联系方式：</a>
<el-input  v-model="updateData.call"></el-input>
<a style="font-weight:bold">登陆账户名：</a>
<el-input  v-model="updateData.user"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="ok()">确 定</el-button>
  </span>
</el-dialog>

<el-dialog
  title="修改密码"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <a style="font-weight:bold">姓名:</a>
  <el-input v-model="updateData.name" :disabled="true"></el-input>
  <a style="font-weight:bold">用户名:</a>
   <el-input v-model="updateData.user" :disabled="true"></el-input>
   <a style="font-weight:bold">密码:</a>
   <el-input v-model="this.$store.state.mima"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</div>

</template>

<script>
import Vue from 'vue'
import store from '../vuex/management.js'
import person from '../../comservice/person'
export default {
  name: 'management',
  store,
  // updateData,
  data() {
    return {
      dialogVisible: false,
      centerDialogVisible: false,
      // mima: '2323423',
      input: '',
      updateData: {},
      newsList: [{}]
    }
  },
  created() {
    person.getdata()
  },
  methods: {
    ok() {
      this.dialogVisible = false
      for (let i = 0; i < this.$store.state.newsList.length; i++) {
        const list = this.$store.state.newsList[i]
        if (list.number === this.$store.state.updateData.number) {
          this.$store.state.newsList[i] = this.$store.state.updateData
          Vue.set(this.$store.state.newsList, i, this.$store.state.newsList[i])
          this.$notify({
            title: '修改成功',
            message: '修改成功',
            type: 'success'
          })
        }
      }
    },

    // ok() {
    //   this.dialogVisible = false
    //   for (let i = 0; i < this.$store.state.newsList.length; i++) {
    //     const list = this.$store.state.newsList[i]
    //     if (list.number === this.$store.state.updateData.number) {
    //       this.$store.state.newsList[i] = this.$store.state.updateData
    //       Vue.set(this.$store.state.newsList, i, this.$store.state.newsList[i])
    //       this.$notify({
    //         title: '修改成功',
    //         message: '修改成功',
    //         type: 'success'
    //       })
    //     }
    //   }
    // },
    set(index, row) {
      console.log(row)
      this.centerDialogVisible = true
      this.updateData = Object.assign({}, row)
      console.log(this.newsList, this.updateData)
    },
    xiugai(index, row) {
      this.dialogVisible = true
      this.$store.commit('xiugai', { data: Object.assign({}, row) })
      this.updateData = this.$store.state.updateData
      // this.updateData = Object.assign({}, row)
    },
    deleteRow(index) {
      this.$store.state.newsList.splice(index, 1)
      this.$notify.error({
        title: '成功删除',
        message: '成功删除'
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

